<template>
  <div class="valid-price">
    <div class="header">
      <div class="left"></div>
      <div class="right">有效报价单</div>
    </div>

    <div class="content">
      <ValidFilter :searchObj="searchObj" @handle="handle"></ValidFilter>

      <Table
        :tableData="tableData"
        :tableColumn="tableColumn"
        :tableCellWidth="tableCellWidth"
        :tableCellAlign="tableCellAlign"
        :tableShowTooltip="tableShowTooltip"
        :tableEdit="tableEdit"
        :tableShowPagination="tableShowPagination"
        :paginationObj="paginationObj"
        :tableIsShowSerial="false"
        :tableIsShowCheckbox="true"
        :minHeight="500"
      >
        <!-- 自定义单元格 -->
        <template #enquiryType="scope">
          <el-tag type="success">{{ scope.row.enquiryType }}</el-tag>
        </template>

        <template #model="scope">
          <el-link type="primary" @click="clickOrder(scope.row)">{{
            scope.row.model
          }}</el-link>
        </template>

        <template #status="scope">
          <el-tag type="danger">{{ scope.row.status }}</el-tag>
        </template>
      </Table>
    </div>

    <DickerDrawer :drawer="drawer" @close="closeDrawer"></DickerDrawer>
  </div>
</template>

<script>
import ValidFilter from "./components/ValidFilter.vue";
import Table from "@/components/ability-components/table.vue";
import DickerDrawer from "@/views/enquiry/myDicker/components/DickerDrawer.vue";
export default {
  components: {
    ValidFilter,
    Table,
    DickerDrawer,
  },
  data() {
    return {
      drawer: false,
      searchObj: {
        model: "",
        orderId: "",
        priceType: "",
        time: "",
        Date: [],
      },
      paginationObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableShowPagination: true,
      tableEdit: {
        isShowEdit: false,
        align: "center",
      },
      tableShowTooltip: [],
      tableCellAlign: [
        {
          prop: "applyDate",
          align: "center",
        },
        {
          prop: "remainDate",
          align: "center",
        },
        {
          prop: "enquiryType",
          align: "center",
        },
        {
          prop: "enquiryId",
          align: "center",
        },
        {
          prop: "status",
          align: "center",
        },
        {
          prop: "model",
          align: "center",
        },
        {
          prop: "brand",
          align: "center",
        },
        {
          prop: "count",
          align: "center",
        },
        {
          prop: "batch",
          align: "center",
        },
        {
          prop: "encapsulation",
          align: "center",
        },
        {
          prop: "currency",
          align: "center",
        },
        {
          prop: "myDicker",
          align: "center",
        },
        {
          prop: "dickerConfirm",
          align: "center",
        },
        {
          prop: "deliveryDate",
          align: "center",
        },
        {
          prop: "deliveryAddress",
          align: "center",
        },
        {
          prop: "MPQ",
          align: "center",
        },
        {
          prop: "packing",
          align: "center",
        },

        {
          prop: "billingType",
          align: "center",
        },
        {
          prop: "remark",
          align: "center",
        },
      ],
      tableCellWidth: [
        {
          prop: "applyDate",
          width: "200",
        },
        {
          prop: "remainDate",
          width: "120",
        },
        {
          prop: "enquiryType",
          width: "200",
        },
        {
          prop: "enquiryId",
          width: "200",
        },
        {
          prop: "myDicker",
          width: "150",
        },
        {
          prop: "dickerConfirm",
          width: "200",
        },
        {
          prop: "deliveryDate",
          width: "150",
        },
        {
          prop: "billingType",
          width: "200",
        },
        {
          prop: "status",
          width: "150",
        },
      ],
      tableColumn: [
        {
          prop: "applyDate",
          label: "报价日期",
        },
        {
          prop: "remainDate",
          label: "倒计时",
        },
        {
          prop: "status",
          label: "状态",
          slot: true,
        },
        {
          prop: "model",
          label: "型号",
          slot: true,
        },
        {
          prop: "brand",
          label: "品牌",
        },
        {
          prop: "count",
          label: "数量",
        },
        {
          prop: "batch",
          label: "批次",
        },
        {
          prop: "encapsulation",
          label: "封装",
        },
        {
          prop: "currency",
          label: "币种",
        },
        {
          prop: "myDicker",
          label: "接受价",
        },
        {
          prop: "dickerConfirm",
          label: "最终报价",
        },

        {
          prop: "deliveryDate",
          label: "交货期",
        },
        {
          prop: "deliveryAddress",
          label: "交货地",
        },
        {
          prop: "MPQ",
          label: "MPQ",
        },
        {
          prop: "packing",
          label: "包装",
        },
        {
          prop: "billingType",
          label: "开票类型",
        },
        {
          prop: "remark",
          label: "备注",
        },
      ],
      tableData: [
        {
          Key: "1",
          ID: "1",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "已生成订单",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
        {
          Key: "2",
          ID: "2",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "已生成订单",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
        {
          Key: "3",
          ID: "3",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "已生成订单",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
        {
          Key: "4",
          ID: "4",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "已生成订单",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
        {
          Key: "5",
          ID: "5",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "已生成订单",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
      ],
    };
  },
  methods: {
    closeDrawer() {
      this.drawer = false;
    },
    clickOrder(row) {
      this.drawer = true;
    },
    clear() {
      Object.keys(this.searchObj).forEach((key) => {
        if (Array.isArray(this.searchObj[key])) {
          this.searchObj[key] = [];
        } else {
          this.searchObj[key] = "";
        }
      });
    },
    enquiry() {
      this.$router.push("/home/addEnquiry");
    },
    createOrder() {
      this.$router.push("/home/createOrder");
    },
    handle(func) {
      console.log(func, "handle");
      this[func]();
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.valid-price {
  .header {
    display: flex;
    margin-bottom: 20px;
    .left {
      background-color: #442a8d;
      width: 5px;
      height: 20px;
      margin-right: 5px;
    }
    .right {
      font-weight: 650;
      color: #666666;
      font-size: 16px;
    }
  }
}
</style>
